<template>
  <div>
    <el-form label-width="80px" :model="formData">
      <el-form-item label="节点ID">
        <el-input v-model="formData.id" disabled readonly />
      </el-form-item>
      <el-form-item label="节点编码">
        <el-input v-model="formData.code" :disabled="isDetail" :readonly="isDetail" />
      </el-form-item>
      <el-form-item label="名称">
        <el-input v-model="formData.text" :disabled="isDetail" :readonly="isDetail" />
      </el-form-item>
      <el-form-item label="是否会签">
        <el-radio-group v-model="formData.joinSign" :disabled="isDetail" :readonly="isDetail">
          <el-radio :label="0">否</el-radio>
          <el-radio :label="1">是</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="审批形式">
        <el-radio-group v-model="formData.approvalForm" :disabled="isDetail" :readonly="isDetail" @change="onChange">
          <el-radio :label="0">创建人</el-radio>
          <el-radio :label="1">指定人</el-radio>
          <el-radio :label="2">指定组</el-radio>
          <el-radio :label="9">自定义</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="审批对象">
        <el-row>
          <el-col :span="18">
            <div class="approvers-contain">
              <span v-for="item in formData.approvers" :key="item.id" :title="item.name">
                {{ item.name }}
              </span>
            </div>
          </el-col>
          <el-col :span="6">
            <el-button :disabled="isDetail" :readonly="isDetail" @click="showApprovalModal"> 选择 </el-button>
          </el-col>
        </el-row>
      </el-form-item>
      <!-- <el-form-item label="选择">
        <el-select
          v-model="formData.approvers"
          class="m-2"
          :filterable="true"
          :fit-input-width="true"
          :multiple="true"
          placeholder="选择审批对象"
        >
          <el-option
            v-for="item in approverList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item> -->
      <el-form-item label="审批级别">
        <el-select
          v-model="formData.approvalLevel"
          clearable
          :disabled="isDetail"
          placeholder="请选择用户类型"
          :readonly="isDetail"
        >
          <el-option v-for="item in approvalLevelEnums" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" />
        </el-select>
      </el-form-item>
      <el-form-item label="指定审批人">
        <el-radio-group v-model="formData.isAssign" :disabled="isDetail" :readonly="isDetail">
          <el-radio :label="0">否</el-radio>
          <el-radio :label="1">是</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="指定退回">
        <el-radio-group v-model="formData.isReject" :disabled="isDetail" :readonly="isDetail">
          <el-radio :label="0">否</el-radio>
          <el-radio :label="1">是</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button :disabled="isDetail" :readonly="isDetail" type="primary" @click="onSubmit"> 保存 </el-button>
      </el-form-item>
    </el-form>
    <!-- 审批对象列表 -->
    <el-drawer v-model="issShowApprovalModal" direction="rtl" size="860px" title="选择审批对象">
      <ApprovalList
        :approval-form="formData.approvalForm"
        :approvers="formData.approvers"
        @handle-select-appovals="handleSelectAppovals"
      />
    </el-drawer>
  </div>
</template>
<script setup>
import ApprovalList from "./ApprovalList.vue";
import { getLocalStorage } from "@/api/mains";
/*import { getLocalStorage } from '@/api/mains'*/
const props = defineProps({
  nodeData: {
    type: Object,
    default: () => {}
  },
  lf: {
    type: Object,
    default: () => {}
  },
  isDetail: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(["on-close"]);

const formData = ref({
  code: "",
  text: "",
  joinSign: 0,
  approvalForm: 1,
  approvers: [],
  isAssign: 0,
  isReject: 0,
  approvalLevel: []
});

const issShowApprovalModal = ref(false);

const approvalLevelEnums = getLocalStorage().approvalLevels;

const showApprovalModal = () => {
  issShowApprovalModal.value = true;
};
const onChange = () => {
  formData.value.approvers = [];
};

const onSubmit = () => {
  const { id } = props.nodeData;
  props.lf.setProperties(id, {
    ...formData.value
  });
  props.lf.updateText(id, formData.value.text);
  emit("on-close");
};

const handleSelectAppovals = (val, isClose) => {
  formData.value.approvers = val.map(item => {
    const cItem = {
      id: item.id,
      name: item.name
    };
    return cItem;
  });
  if (isClose) {
    issShowApprovalModal.value = false;
  }
};

onMounted(() => {
  const { properties, text, id } = props.nodeData;

  formData.value.id = id;
  if (properties) {
    formData.value = { ...formData.value, ...properties };
    const { approvers } = properties;
    if (approvers && approvers.length) {
      formData.value.approvers = approvers.map(item => item && JSON.parse(JSON.stringify(item)));
    }
    //formData.value.approvers = approvers ? JSON.parse(approvers) : []
  }
  if (text && text.value) {
    formData.value.text = text.value;
  }
});
</script>
<style scoped lang="scss">
.approvers-contain {
  padding-right: 5px;
  span {
    display: inline-block;
    max-width: 100px;
    margin-right: 5px;
    overflow: hidden;
  }
}
</style>
